<template>
  <view class="breath-wave-container">
    <!-- 图表容器 -->
    <l-echart ref="waveChart"></l-echart>
  </view>
</template>

<script>
import * as echarts from "echarts";
import { getCopdReportData } from "@/api/copd/copdReport.js";

export default {
  name: "breathe_wave",
  props: {
    currentReportId: {
      type: Number,
      required: true,
    },
    currentReport: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      chartData: [], // 最终绘图数据
      samplingData: [], // 后端返回的呼气流量
      timeInterval: 0.02, // 时间间隔(秒)，你需要根据采样率换算，例如 50Hz = 0.02s
      maxTime: 10, // 默认展示时长(秒)，后面会用数据长度更新
    };
  },

  methods: {
    // 调用接口获取真实呼吸数据
    fetchRespData() {
      console.log("准备请求，currentReportId:", this.currentReportId);

      getCopdReportData(this.currentReportId)
          .then((res) => {
            console.log("接口原始返回:", res);

            // 注意：根据后端返回结构来判断
            const resData = res.data?.data || res.data;
            if (res.data?.code === 200) {
              console.log("真实呼吸流量数据:", resData);

              this.samplingData = resData.flowRates || [];
              this.chartData = this.samplingData.map((v, i) => [
                (i * this.timeInterval).toFixed(2),
                v,
              ]);
              this.maxTime = (this.samplingData.length * this.timeInterval).toFixed(2);

              this.initChart();
            } else {
              console.warn("接口返回非200:", res.data);
            }
          })
          .catch((err) => {
            console.error("获取呼吸流量失败:", err);
          });
    },


    // 初始化图表
    initChart() {
      const option = {
        title: {
          text: "呼吸波形图",
          left: "center",
          textStyle: { fontSize: 14, color: "#444" },
        },
        xAxis: {
          type: "value",
          name: "时间 (s)",
          nameLocation: "center",
          nameGap: 25,
          min: 0,
          max: this.maxTime,
          axisLine: { lineStyle: { color: "#aaa" } },
          splitLine: { lineStyle: { type: "dashed", color: "#ddd" } },
        },
        yAxis: {
          type: "value",
          name: "呼吸流量 (L/s)",
          nameLocation: "center",
          nameGap: 35,
          axisLine: { lineStyle: { color: "#aaa" } },
          splitLine: { lineStyle: { type: "dashed", color: "#ddd" } },
          axisLabel: { formatter: "{value}" },
        },
        series: [
          {
            name: "呼吸波形",
            type: "line",
            data: this.chartData,
            smooth: true,
            showSymbol: false,
            lineStyle: { color: "#66ccff", width: 2 },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#66ccff" },
                  { offset: 1, color: "#cceeff" },
                ],
              },
            },
          },
        ],
        tooltip: { trigger: "axis" },
        grid: {
          left: "15%",
          right: "15%",
          top: "20%",
          bottom: "15%",
          backgroundColor: "#f9f9f9",
          borderColor: "#ddd",
          borderWidth: 1,
        },
      };

      this.$refs.waveChart.init(echarts, (chart) => {
        chart.setOption(option);
      });
    },
  },

  mounted() {
    this.fetchRespData();
  },
};
</script>

<style scoped>
.breath-wave-container {
  width: 100%;
  height: 300px;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
